<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吾家</title>
    <style>
        a {
            text-decoration: none;
            color: #FFFFFF;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .content {
            width: 1200px;
            margin: 0 auto;

        }
        .nav {
            width: 1200px;
            /* height: 60px; */
            background-color: #870521;
            padding: 20px 100px;
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            font-family: Adobe Heiti Std;
            color: #FFFFFF;
        }

        .left {
            display: flex;
            align-items: center;

        }

        .logo {
            width: 40px;
            height: 40px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .title {
            margin-left: 20px;
        }

        .right {
            font-size: 18px;
            font-family: MicrosoftYaHeiLight;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            position: relative;
        }

        .right:hover .soncard {
            opacity: 1;
        }

        .soncard {
            width: 150px;
            height: 124px;
            background: #D31F45;
            position: absolute;
            top: 60px;
            left: -40px;
            opacity: 0;
            transition: all 0.5s;
        }

        .soncard div {
            height: 62px;
            text-align: center;
            line-height: 62px;
        }

        .soncard div div:nth-child(1) {
            border-bottom: 1px solid #ccc;

        }

        .banner {
            height: 695px;
            background-color: #fff;
        }

        .tabtitle {
            width: 800px;
            text-align: center;
            margin: 0 auto;
        }

        .tle1 {
            font-size: 28px;
            font-family: MicrosoftYaHei;
            color: #000000;
            line-height: 73px;
        }

        .tle3 {
            font-size: 28px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: #FF0000;
            line-height: 40px;
            margin-bottom: 100px;
        }

        .tle4 {
            font-size: 20px;
            font-family: MicrosoftYaHeiLight;
            color: #000000;
            line-height: 30px;
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="nav">
            <div class="left">
                <div class="logo">
                    <img src="./images/applogo.png" alt="">
                </div>
                <div class="title">吾家</div>
            </div>
            <div class="right">
                关于我们
                <div class="soncard">
                    <div style="padding: 0 15px;">
                        <div><a href="">公司简介</a></div>
                        <div><a href="">联系我们</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner">
            <img src="./images//图层 4@3x.png" alt="">
        </div>
        <div class="tabtitle tle1">产品简介</div>
        <div class="tabtitle tle3"> 吾家是由郑州利他网络科技有限公司设计研发并运营的一款全民表达并连接所有供给和需求的移动互联网平台产品。 </div>
        <div class="tabtitle tle1">详细介绍</div>
        <div class="tabtitle tle4">
            该产品通过移动互联网引发供需关系变革，有站在产业互联网加共同富裕风口上的产品设计理念，有不受各行各业限制的低成本获客运营方式与极佳的用户粘性，有极广的产品布局、超级流量、超强变现能力和万亿市值的未来，由数千万月流水互联网产品成功经验的团队制作。
        </div>
        <div class="tabtitle tle4">
            所有可以用互联网极简地表达供给或是需求的个体或团体都可以使用该平台，作为供给方商户商品、商户服务、闲置物品、碎片时间、认知经验等等都可以在该平台上架，作为需求方商户商品、商户服务、共享用品、求助陪伴、求知问道等等也都可以在该平台提出。
        </div>
        <div style="height: 300px;"></div>
    </div>
</body>

</html>